<template>
  <div class="app-container">
    <el-row :gutter="20" style="height: 100%;margin-left:0;margin-right: 0;">
      <el-col :span="3" :xs="24" class="treeMenu" style="padding-left: 0;padding-right: 0;">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"><i class="el-icon-tickets"></i></span>
            <el-menu style="padding: 0"
                     default-active="1"
                     class="el-menu-vertical"
                     @open="handleOpen"
                     @close="handleClose">
              <el-menu-item :index="i.id" v-for="i in treeMenu">
                <i :class="i.icon"></i>
                <span>{{ i.name }}</span>
              </el-menu-item>
            </el-menu>
          </el-tab-pane>
          <el-tab-pane v-if="treeData.length>0">
            <span slot="label"><i class="el-icon-document"></i></span>
            <dynamic-tree
              :treeData="treeData"
              @handleNodeClick="handleNodeClick">
            </dynamic-tree>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="21" :xs="24" style="padding-left: 0;padding-right: 0;">
        <el-row class="page-title">
          <el-dropdown v-if="toolbarData.length>4">
            <span class="el-dropdown-link">
              <i class="el-icon-menu"></i>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(btn, key) in toolbarData" v-if="btn.status==='1'" @click="clickEvent(btn.type,btn.url)">{{ btn.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="flex" v-if="toolbarData.length<=4">
            <template v-for="(btn, key) in toolbarData">
              <el-button
                v-if="btn.status==='1'"
                :type="btn.styleType"
                :icon="btn.icon"
                size="mini"
                @click="clickEvent(btn.type,btn.url)"
              >{{ btn.name }}
              </el-button>
            </template>
          </div>
        </el-row>

        <div class="mainContent">
          <el-row v-if="tableData.length>0">
            <!--列表数据-->
            <common-table :list="tableData" @handleSelectionChange="handleSelectionChange" :options="options"
                          :columns="columns" :operates="operates">
            </common-table>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                        @pagination="getList"/>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getDataList,getConfigInfo } from '@/api/dynamic/dynamicDetails'
import dynamicTree from '../../components/dynamicTree.vue';

export default {
  components: { dynamicTree },
  data() {
    return {
      pageTitle:'',
      url:'',
      toolbarData: [],
      formData: [],
      tableData: [],
      treeMenu:[],
      treeData:[],
      options: {// table 的参数
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true // 是否支持列表项选中功能
      },
      checkedColumns: [],
      columns: [],// 需要展示的列
      queryParams:{
        table:'',
        form:'',
        command:'',
        toolbar:'',
        treeMenu:'',
        partal:'',
      },
      dataInfo:''
    }
  },
  created() {
    let params = this.$route.params;
    if(params.pageParams){
      this.queryParams.table=params.pageParams.table;
      this.queryParams.form=params.pageParams.form;
      this.queryParams.command=params.pageParams.command;
      this.queryParams.toolbar=params.pageParams.toolbar;
      this.queryParams.treeMenu=params.pageParams.treeMenu;
    }else{
      this.msgError("缺少参数");
      return false;
    }
    var url=params.pageParams.url;
    if(url.indexOf("{") != -1){
      var substr = url.substring( url.indexOf("{") + 1, url.indexOf("}"));
      url=url.substring( 0, url.indexOf("{"));
      url+=params.rowParams[substr];
    }
    this.url=url;
    this.getConfig();
  },
  methods: {
    /** 获取配置信息 */
    getConfig(){
      this.loading = true;
      getConfigInfo(this.queryParams).then(response => {
        this.tableData = response.data.tableData;
        this.formData = response.data.formData;
        this.treeMenu = response.data.treeMenuData;
        this.toolbarData = response.data.toolbarData;
        this.loading = false;
        this.getDataInfo();
      })
    },
    /** 获取数据 */
    getDataInfo(){
      this.loading = true;
      getDataList(this.url).then(response => {
        this.dataInfo = response.data[0];
        this.loading = false
      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    clickEvent(){

    }
  }
}
</script>
<style scoped>
.app-container{
  margin: 0;
  padding:0;
}
.treeMenu{
  background-color: #f8f8f8;
  height: 100%;
}
.app-container .head-container{
  padding-left: 5px;
  padding-right: 5px;
  border-top: 1px solid #d8d8d8;
}

.el-tabs__item{
  height:30px;
  line-height: 30px;
}
.page-title{
  background: #fff;
  border: 1px solid #D8D8D8;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  /*margin-bottom: 5px;*/
}
.headerContent{
  float: left;
  padding: 20px 0 10px;
  width: 100%;
}
.extendedHeader{
  display: block;
  line-height: 23px;
  white-space: nowrap;
}
.extendedHeader.name{
  font-size: 16px;
  font-weight: bold;
  font-family: "3dsregular", Arial, Helvetica, sans-serif;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.extendedHeader.content{
  font-size: 13px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.extendedHeader.fromTitle{
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flex{
  display: flex;
}
.infinite-list{
  list-style: none;
  padding: 5px;
  margin: 0;
}
.infinite-list-item{
  list-style: none;
  padding: 5px;
  margin: 0;
  background-color: #f8f8f8;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}
.infinite-list-item.selected{
  list-style: none;
  padding: 5px;
  margin: 0;
  background-color: #fff;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}
.el-dropdown{
  padding: 10px;
  border-right: 1px solid #C3C3C3;
}
.mainContent{
  float: left;
  width: 100%;
}
.extendedMain{
  display: block;
  line-height: 23px;
  white-space: nowrap;
}
.extendedMain.name{
  font-size: 16px;
  font-weight: bold;
  font-family: "3dsregular", Arial, Helvetica, sans-serif;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.extendedMain.content{
  font-size: 13px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0 5px 10px;
}
.extendedMain.fromTitle{
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0 5px 10px;
  background-color: #f8f8f8;
}
</style>
